<template>
	<view class="uni_box">
		<!-- 顶部兼容组件APP端 -->
		
		<view class="newcontent">
			<Nheader></Nheader>
			<!-- 试听列表 -->

			<view class="tabview">
				<u-tabs :list="tiyanlist" :is-scroll="true" :current="tiyantabcurrent" @change="tiyantabchange" active-color="rgba(250, 78, 78, 1)" inactive-color="#CCCCCC"></u-tabs>
			</view>
			<!-- 咨询顶部 -->
			<view class="zione">
				<view class="zicont">
					<view class="zilist" v-for="(item,index) in tiyandata" :key="index">
						<view class="zbiao">
							<!-- <image src="/static/home/zitime.png" class="zitime" mode=""></image> -->
							<text class="ztit">{{item.title}}</text>
						</view>
						<text class="zbt txt">{{item.content}}</text>
					</view>
					<view class="znav" v-if="ClassList">
						<view class="znitem"  v-for="(item,index) in ClassList" :key="index">
							<image :src="item.image" class="zinavicon" mode=""></image>
							<text class="zntit">{{item.name}}</text>
						</view>
					</view>
				</view>
				<image v-if="adinfo.image" :src="adinfo.image" class="zitu" mode=""></image>
			</view>

			<view class="ketan plr">
				<view class="nbthree">
					<text class="zhitit">考试动态</text>
					<view class="gd" v-if="tianshudata.text">
						<text class="gdtit">{{tianshudata.text}}</text>
						<!-- <image src="/static/home/you.png" class="you" mode=""></image> -->
					</view>
				</view>

				<view class="tilist-kao">
					<view class="kaoitem" v-for="(item,index) in zixundata" :key="index" @click="getziDetail(item)">
						<view class="kaoleft">
							<text class="kaotit">{{ item.title }}</text>
							<view class="kaobot">
								<view class="kaoqi">
									<image src="/static/home/zsj.png" class="ticon" mode=""></image>
									<text class="sjians">{{item.time}}</text>
								</view>
								<view class="kaoqi">
									<image src="/static/home/zyl.png" class="ticon" mode="" style="height: 15rpx;width: 20rpx;"></image>
									<text class="sjians">{{item.views}}</text>
								</view>
							</view>
						</view>
						<image :src="item.image" class="itemimg" mode=""></image>
					</view>
				</view>
				<view class="nextpage">
					<view class="nextitem" @click="gethome">首页</view>
					<view class="nextitem" @click="getpage(1)">上一页</view>
					<view class="nextitem" @click="getpage(2)">下一页</view>
				</view>
				<!-- <view class="cahzhibo">
					更多CFA试学
				</view> -->
			</view>
			<view class="qiview plr">
				<u-tabs :list="qitablist" :is-scroll="false" :current="qitabcurrent" @change="qitabchange" active-color="rgba(250, 78, 78, 1)" inactive-color="#CCCCCC"></u-tabs>
			</view>
			<view class="qilist plr" v-if="qitabcurrent == 0">
				<view class="qiitem" v-for="(item,index) in qitadata" :key="index" @click="getziDetailtwo(item)">{{item.title}}</view>
			</view>
			<view class="qilist plr" v-if="qitabcurrent == 1">
				<view class="qiitem" v-for="(item,index) in remendata" :key="index" @click="getziDetail(item)">{{item.title}}</view>
			</view>
			<!-- 底部导航 -->
			<Tabbar :current="1"></Tabbar>
		</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			lunlist:[
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// },
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
				// 	title: '身无彩凤双飞翼，心有灵犀一点通'
				// },
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
				// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// }
			],
			ClassList:[
				// {
				// 		id:  4,
				// 		name:  "生活",
				// 		icon:  [
				// 				{
				// 						name:  "省钱话费",
				// 				},
				// 				{
				// 						name:  "省钱话费",
				// 				},
				// 				{
				// 						name:  "省钱话费",
				// 				},
				// 				{
				// 						name:  "省钱话费",
				// 				},
				// 				{
				// 						name:  "省钱话费",
				// 				}
				// 	]
				// }
			],
			qitablist:[
				{name:'其他人还搜了',id:1},
				{name:'热门推荐',id:1},
			],
			qitabcurrent:0,
			indicatorDots: false,
			autoplay: true,
			interval: 5000,
			duration: 1500,
			swcurrent: 0,
			count:5,
			pinlist:[
				{
					avatar:'https://cdn.uviewui.com/uview/swiper/1.jpg',
					nickname:'测试昵称',
					content:'谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				},
				{
					avatar:'https://cdn.uviewui.com/uview/swiper/1.jpg',
					nickname:'测试昵称',
					content:'谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				},
				{
					avatar:'https://cdn.uviewui.com/uview/swiper/1.jpg',
					nickname:'测试昵称',
					content:'谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			tablist:[
				{
					name: 'CFA'
				}, {
					name: 'FRM'
				}, {
					name: 'ACCA'
				},{
					name:'CPA'
				},{
					name: 'CFA'
				}, {
					name: 'FRM'
				}, {
					name: 'ACCA'
				},{
					name:'CPA'
				}
			],
			tabcurrent:0,
			currentIndex: 0,
			posterData:[
				'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
				'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
				'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
			],
			zixuninfo:{

			},
			zixunlist:[],
			zixundata:[],//咨询数据
			zixuntabcurrent:0,

			tushulist:[],//图书列表
			tushuinfo:{},
			tushutabcurrent:0,
			tushudata:[],

			xuexilist:[],//学习融跃
		    xuexiinfo:{},
			xuexitabcurrent:0,
			xuexidata:[],

			tiyanlist:[],//体验课程
		    tiyaninfo:{},
			tiyantabcurrent:0,
			tiyandata:[],

			zhibolist:[],//直播课堂
			page:1,
			lastpage:1,
			cate_id:'1',
			adinfo:{
				image:''
			},
			tianshudata:{
				text:''
			},
			qitadata:[],
			remendata:[],
			id:''
		}
	},
	components: {
	},
	computed: {
	},

	mounted() {

	},
	async onLoad(option) {
		if(option.id){
			this.id = option.id
		}
	},
	async onShow() {
		this.getinit()
	},
	onReachBottom: function () {
	},
	methods: {
		getinit(){
			this.CateList()
			// this.fgetCate();//分类
			// this.fgetZhiboList();//今日直播
			// this.fgetBanner();//轮播图
			// this.fgetMenu();//金刚区
		},
		async CateList(){
			let res = await this.$u.api.artgetArticleType({
				cate_id:this.cate_id
			});
			// this.zixunlist = res
			// this.tushulist = res
			// this.xuexilist = res
			this.tiyanlist = res
			if(res){
				// 顶部数据
				// this.tiyaninfo = res[0]
				let data = res
					if(this.id){
						for(let i in data){
						if(data[i].id == this.id){
							this.tiyaninfo = res[i]
							this.tiyantabcurrent = i
						}
					}
				}else{
					this.tiyaninfo = res[0]
				}

				this.gettiyan();
				this.fgetMenu()
				this.fgetAds()
				this.fgetTestTime();//考试天数
				this.fgetArticleList();//咨询列表
				this.fgetSearchLog();//其他人还搜了
			}
		},
		async fgetMenu(){//金刚区
			let res = await this.$u.api.artgetMenu({
				cate_id:this.cate_id,
				type_id:this.tiyaninfo.id
			});
			this.ClassList = res
		},
		async fgetAds(){//胶囊广告
			let res = await this.$u.api.getAds({
				cate_id:this.cate_id,
				type_id:this.tiyaninfo.id
			});
			this.adinfo = res
		},
		async gettiyan(){//顶部参数
			let res = await this.$u.api.getTopData({
				cate_id:this.cate_id,
				type_id:this.tiyaninfo.id
			});
			this.tiyandata = res
		},
		async fgetTestTime(){//考试天数
			let res = await this.$u.api.getTestTime({
				cate_id:this.cate_id,
				type_id:this.tiyaninfo.id
			});
			this.tianshudata = res
		},
		async fgetBanner(){
			let res = await this.$u.api.shopgetBanner({
				mark:'h5-free'
			});
			this.lunlist=res
		},
		async fgetArticleList(){
			let res = await this.$u.api.getArticleList({
				cate_id:this.cate_id,
				type_id:this.tiyaninfo.id,
				page:this.page
			});
			this.lastpage = res.lastpage
			this.zixundata = res.list
		},
		async fgetSearchLog(){
			let res = await this.$u.api.getSearchLog({
				cate_id:this.cate_id,
				type_id:this.tiyaninfo.id
			});
			this.qitadata = res

			let resd = await this.$u.api.getArticleListForTui({
				cate_id:this.cate_id,
				type_id:this.tiyaninfo.id
			});
			this.remendata = resd
		},
		
		swchange(e){
			// console.log(e)
		},
		tabchange(e){
			this.tabcurrent = e
		},
		swiperChange(event) {
			console.log(event)
			this.currentIndex = event.detail.current
			this.currentPoster = this.posterData.poster[this.currentIndex]
			// console.log(this.currentPoster)
		},
		previewImage(index, url){
			console.log('index', index)
			uni.previewImage({
				current: index, //预览图片的下标
				urls: this.posterData.poster //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		zixuntabchange(e){
			this.zixuntabcurrent = e
			let zixunlist = this.zixunlist
			this.zixuninfo = zixunlist[e]
			this.getzixun();
		},
		tushutabchange(e){
			this.tushutabcurrent = e
			let tushulist = this.tushulist
			this.tushuinfo = tushulist[e]
			this.gettushu();
		},
		xuexitabchange(e){
			this.xuexitabcurrent = e
			let xuexilist = this.xuexilist
			this.xuexiinfo = xuexilist[e]
			this.getxuexi();
		},
		tiyantabchange(e){
			this.tiyantabcurrent = e
			let tiyanlist = this.tiyanlist
			this.tiyaninfo = tiyanlist[e]
			this.gettiyan();
			this.fgetMenu()
			this.fgetAds()
			this.fgetTestTime();//考试天数
			this.fgetArticleList();//咨询列表
			this.fgetSearchLog();//其他人还搜了
		},
		qitabchange(e){
			this.qitabcurrent = e
		},
		getprohome(){
			this.navrouter("/pages/tabbar/Phome");//项目首页
		},
		gethome(){
			uni.switchTab({ url: '/pages/tabbar/Tabhome' })
		},
		getziDetail(item){
			this.navrouter("/pages/tabbar/ZiXunDetail?id="+item.id+'&type_id='+this.tiyaninfo.id);
		},
		getziDetailtwo(item){
			this.navrouter("/pages/tabbar/ZiXunDetail?id="+item.article_id+'&type_id='+this.tiyaninfo.id);
		},
		getpage(e){
			if(e == 1){
				//上一页
				if(this.page == 1){
					this.$u.toast("没有上一页了");
				}else{
					this.page--
					this.fgetArticleList()
				}
			}else if(e == 2){
				//下一页
				if(this.page == this.lastpage){
					this.$u.toast("没有下一页了");
				}else{
					this.page++
					this.fgetArticleList()
				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>

.newcontent {
	min-height: 100vh;
	padding-bottom: 120rpx;
	background-color: #fff;
	.lun{
		margin: 20rpx 30rpx 30rpx;
	}
	.plr{
		padding: 0 30rpx;
	}
	.ketan{
		// padding: 0 30rpx;
		margin-bottom: 40rpx;
		margin-top: 10rpx;
	}
	.nbiao{
		display: flex;
		flex-direction: row;
		align-items: center;
		.zhiboicon{
			width: 38rpx;
			margin-right: 15rpx;
			height: 36rpx;
		}
		.ftit{
			font-family: PingFangSC;
			font-weight: 800;
			font-size: 38rpx;
			color: #111111;
		}
	}
	.zione{
		padding: 30rpx;
		background-color: #F6F7FB;
		
		.zicont{
			border-radius: 10rpx;
			background-color: #fff;
			padding: 20rpx;
		}
		.zilist{
			display: flex;
			flex-direction: row;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #eee;
			align-items: center;
			.zitime{
				width: 20rpx;
				height: 20rpx;
				margin-right: 9rpx;
			}
			.zbiao{
				display: flex;
				padding: 5rpx 8rpx;
				background: #FEF6F2;
				border-radius: 4rpx;
				border: 1rpx solid #FFDDCC;
				flex-direction: row;
				align-items: center;
				margin-right: 15rpx;
			}
			.ztit{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #FA7938;
			}
			.zbt{
				max-width: 75%;
				display: inline-block;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #111111;
			}
		}
		.znav{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 30rpx;
			.znitem{
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.zinavicon{
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 10rpx;
				}
				.zntit{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}

	}
	.zitu{
		// width: 100%;
		height: 159rpx;
		margin: 30rpx;
	}
	.nbtwo{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 49rpx 0 40rpx;
		.icons{
			width: 36rpx;
			height: 16rpx;

		}
		.zhitit{
			display: inline-block;
			font-family: PingFangSC;
			font-weight: 800;
			font-size: 34rpx;
			color: #333333;
			margin: 0 28rpx;
		}
	}
	.nbthree{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin: 49rpx 0 30rpx;
		.zhitit{
			display: inline-block;
			font-family: PingFangSC;
			font-weight: 800;
			font-size: 36rpx;
			color: #333333;
		}
		.gd{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: auto;
			background: #FFF0F0;
			border-radius: 18rpx;
			padding: 7rpx 15rpx;
			.gdtit{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FA4E4E;
			}
			.you{
				width: 10rpx;
				height: 20rpx;
				margin-left: 12rpx;
			}
		}
	}
	.neitwo{
		margin-bottom: 30rpx;
		.swiper {
			// width: 50%;
			flex: 1;
			// margin: 0 20rpx;
			height: 250rpx;
			.swiperitem {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 100%rpx !important;
				margin-right: 30rpx;
				height: 250rpx !important;
				// background: #000;
				// box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(216,216,216,0.35);
				// border-radius: 16rpx;
				.sview{
					width: 96%;
					height: 100%;
					display: flex;
					flex-direction: column;
					box-shadow: 0px 0px 12px 0px rgba(216, 216, 216, 0.35);
					border-radius: 10px;
					background-color: #fff;
					border: 1rpx solid #EEEEEE;
					padding: 30rpx;
					position: relative;
					.sqian{
						display: flex;
						flex-direction: row;
						align-items: center;
						.qone{
							padding: 4rpx 6rpx;
							background: #EDFCF1;
							border-radius: 4rpx;
							border: 1rpx solid #B8E7C3;
							font-weight: 400;
							font-size: 20rpx;
							color: #46C564;
							margin-right: 10rpx;
						}
						.nbiao{
							font-family: PingFangSC;
							font-weight: bold;
							font-size: 28rpx;
							color: #111111;
						}
					}
					.rbiao{
						position: absolute;
						right: 0;
						top: 20rpx;
						width: 80rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.leis{
							position: absolute;
							width: 100%;
							height: 100%;
						}
						.rbview{
							position: relative;
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
							padding-top: 10rpx;
						}
					}
					.rbati{
						font-family: PingFangSC;
						font-weight: bold;
						font-size: 28rpx;
						color: #111111;
						display: block;
						margin: 30rpx 0 20rpx;
					}
					.sjian{
						width: 145rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						white-space: nowrap;
						display: block;
						margin: 20rpx 0 30rpx;
					}
					.lunone{
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 100%;
						margin-bottom: 15rpx;
						.jtou{
							width: 66rpx;
							height: 66rpx;
							margin-right: 15rpx;
							border-radius: 50%;
						}
						.jiright{
							display: flex;
							flex-direction: column;
							.jiname{
								// max-width: 80%;
								display: inline-block;
								font-weight: 500;
								font-size: 24rpx;
								color: #111111;
							}

						}

					}
					.hui{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 130rpx;
						height: 52rpx;
						background: linear-gradient(-90deg, #FA4E4E, #FD894F);
						border-radius: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						margin-left: auto;
					}
					.lunwen{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: auto;
						.hui{
							display: flex;
							align-items: center;
							justify-content: center;
							width: 130rpx;
							height: 52rpx;
							background: linear-gradient(-90deg, #FA4E4E, #FD894F);
							border-radius: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
						}
						.mfei{
							margin-left: auto;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #46C564;
						}
					}
					.iosheight{
						height: 196rpx;
					}

				}
			}

			.cetit {
				font-size: 20px;
				font-weight: 500;
				display: block;
				margin-bottom: 20rpx;
				color: rgba(255, 255, 255, 1);
				font-family: "Tangerine" !important;
			}
		}

		.xians {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			position: relative;

			.jiaobg {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}

		.twoimg {
			transform: rotate(180deg);
		}
	}
	.cahzhibo{
		height: 80rpx;
		border-radius: 10rpx;
		border: 1px solid #EEEEEE;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.tabview{
		border-bottom: 1rpx solid #eee;

	}
	.qilist{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.qiitem{
			padding: 20rpx 70rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #333333;
			margin: 0 30rpx 30rpx 0;
		}
	}
	.tilist{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 35rpx;
		.tiitem{
			width: 48%;
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 26rpx;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
			.itemimg{
				width: 100%;
				height: 200rpx;
				border-radius: 6rpx;
			}
			.itembot{
				padding: 25rpx 20rpx;

			}
			.tbiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #111111;
				display: block;
				margin-bottom: 15rpx;
				// max-width: 80%;

			}
			.timiao{
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
			.linview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 25rpx;
				.liji{
					padding: 15rpx 20rpx;
					// background: #FFF0F0;
					background: linear-gradient(-90deg, #FA4E4E, #FD894F);
					border-radius: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #fff;
				}
				.mian{
					margin-left: auto;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #46C564;
				}
				.renyu{
					margin-left: auto;
					font-weight: 500;
					font-size: 20rpx;
					color: #CCCCCC;
				}
				.shixue{
					padding: 12rpx 30rpx;
					border-radius: 26rpx;
					background: linear-gradient(-90deg, #46C564, #AFE46A);
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
				}
				.mf{
					border: 1rpx solid #46C564;
					color: #46C564;
					background: none;
				}
				.fufei{
					background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				}
			}
			
		}
		.tiitem:nth-child(even){
			margin-left: auto;
		}
	}

	.tilist-xue{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 35rpx;
		.tiitem{
			width: 48%;
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
			.itemimg{
				width: 100%;
				height: 200rpx;
				border-radius: 10rpx 10rpx 0 0;
			}
			.itembot{
				padding: 25rpx 20rpx;

			}
			.tbiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #111111;
				display: block;
				margin-bottom: 15rpx;

			}
			.timiao{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
			.linview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 30rpx;
				.liji{
					padding: 15rpx 20rpx;
					background: #FFF0F0;
					border-radius: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FA4E4E;
				}
				.mian{
					margin-left: auto;
					font-weight: 500;
					font-size: 20rpx;
					color: #CCCCCC;
				}
				.jine{
					font-family: DIN;
					font-weight: bold;
					font-size: 20rpx;
					color: #FA4E4E;
					.jinnum{
						font-size: 32rpx;
					}
				}
			}
			
		}
		.tiitem:nth-child(even){
			margin-left: auto;
		}
	}
	.tilist-jiaocai{
		margin-top: 40rpx;
		.tiitem-two{
			display: flex;
			flex-direction: row;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;
			.itemimgview{
				width: 260rpx;
				height: 160rpx;
				margin-right: 20rpx;
				position: relative;
			}
			.itemimg{
				width: 100%;
				height: 100%;
				background: #F8F8F8;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			.boyue{
				background-color: rgba(0, 0, 0, 0.4);
				height: 32rpx;
				width: 100%;
				border-radius: 0 0 10rpx 10rpx;
				position: absolute;
				width: 100%;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
			}
			.itembot{
				flex: 1;
				display: flex;
				flex-direction: column;
				width: 55%;
				.tbiao{
					max-width: 100%;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
					display: inline-block;
				}
				.timiao{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					display: inline-block;
					margin-top: 20rpx;
				}

				.linview{
					display: flex;
					margin-top: auto;
					flex-direction: row;
					align-items: center;
					.jine{
						font-family: DIN;
						font-weight: bold;
						font-size: 20rpx;
						color: #FA4E4E;
						.jinnum{
							font-size: 32rpx;
						}
						
					}
					.mian{
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #46C564;
					}
					.yubtn{
						margin-left: auto;
						padding: 10rpx 20rpx;
						background: linear-gradient(-90deg, #FA4E4E, #FD894F);
						border-radius: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;

					}
					.hui{
						background: #FFF0F0;
						color: rgba(250, 78, 78, 1);
					}
				}
			}
		}
	}
	.nextpage{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
		.nextitem{
			padding: 14rpx 40rpx;
			// height: 52rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			margin: 0 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.tilist-kao{
		margin-top: 40rpx;
		.kaoitem{
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			align-items: center;
			.itemimg{
				width: 230rpx;
				height: 150rpx;
				margin-left: auto;
				border-radius: 20rpx;
			}
			.kaoleft{
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-right: 20rpx;
				.kaotit{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
				}
				.kaobot{
					margin-top: 50rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.kaoqi{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-right: 40rpx;
						.ticon{
							width: 18rpx;
							height: 18rpx;
							margin-right: 10rpx;
						}
						.sjians{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
	
	.kaoview{
		width: 100%;
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 40rpx;
		.kaoleft{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC;
			font-weight: bold;
			font-size: 28rpx;
			color: #CCCCCC;
			height: 100%;
		}
		.kactive{
			background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			border-radius: 40rpx;
			font-family: PingFangSC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.tilist-kao{
		margin-top: 40rpx;
		.kaoitem{
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			align-items: center;
			.itemimg{
				width: 230rpx;
				height: 150rpx;
				margin-left: auto;
				border-radius: 20rpx;
			}
			.kaoleft{
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-right: 20rpx;
				.kaotit{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
				}
				.kaobot{
					margin-top: 50rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.kaoqi{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-right: 40rpx;
						.ticon{
							width: 18rpx;
							height: 18rpx;
							margin-right: 10rpx;
						}
						.sjians{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}

	.xie{
		margin: 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		text{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #333333;
			text-align: center;
		}
	}
	.pinlist{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.pinitem{
			width: 31%;
			height: 120rpx;
			background-color: #fff;
			padding: 30rpx;
			margin: 0 15rpx 15rpx 0;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.26);
			border-radius: 4rpx;

			.Kaplan_logo{
				width: 150rpx;

			}
		}
	}

	.shiliview{
		margin-top: 30rpx;
		.swiper-block-shili {
			height: 790rpx;
			width: 100%;
			.swiper-item-shili {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				overflow: unset;
				position: relative;
				.skaoview{
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(202,205,217,0.4);
					border-radius: 10rpx;
					border: 1px solid #EEEEEE;
					position: relative;
					.kaooneimg{
						height: 350rpx;
						position: relative;
						width: 100%;
					}
					.jinpai{
						padding: 30rpx;
						display: flex;
						flex-direction: column;
						.jinname{
							font-family: PingFangSC;
							font-weight: bold;
							font-size: 32rpx;
							color: #111111;
							display: block;
							margin-bottom: 15rpx;
						}
						.bqian{
							display: flex;
							flex-direction: row;
							.qianitem{
								padding: 6rpx 10rpx;
								background: #FEF6F2;
								border-radius: 4rpx;
								border: 1px solid #FFDDCC;
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 22rpx;
								color: #FA7938;
								display: inline-block;
								margin-right: 10rpx;
							}
						}
					}
				}
				.slide-image {
					height: 640rpx;
					width: 500rpx;
					border-radius: 9rpx;
					box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
					margin: 0rpx 40rpx;
					z-index: 1;
				}
				.active {
					transform: scale(1.14);
					transition: all 0.2s ease-in 0s;
					z-index: 20;
					}
				}
		}

	}
}
.yin{
	background: #F6F7FB !important;
	padding: 30rpx !important;
	// height: 30rpx;
}
.yinview{
	height: 30rpx;
	background: #F6F7FB;
}
</style>
